<template>
  <el-container>
    <el-header height="40px">
      <el-button round style="margin-top: 5px; float: right ; background-color:transparent;
            border-style:none; color: aliceblue" @click="logout"> 退出
      </el-button>
    </el-header>
    <el-container>
      <el-aside width="250px">
        <el-row :gutter="0">
          <el-col :span="18" :offset="4"
          >
            <div class="grid-content bg-purple">CRM管理系统</div>
          </el-col
          >
        </el-row>
        <el-row :gutter="0">
          <el-col :span="6" :offset="4">
            <div>
              <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              ></el-avatar>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="welcome-content">欢迎您:</div>
            <div class="grid-content bg-purple">{{ user }}</div>
          </el-col>
        </el-row>
        <el-menu
          :default-openeds="openeds"
          :router="true"
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#2A3F54"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>菜单导航</span>
            </template>
            <el-menu-item-group>
              <el-submenu index="1-1">
                <template slot="title"><i class="el-icon-user"></i>会议管理</template>
                <el-menu-item index="/welcome/conferenceRoom"><i class="el-icon-user-solid">会议预订</i></el-menu-item>
                <el-menu-item index="/welcome/car"><i class="el-icon-user-solid">车辆预定 </i></el-menu-item>
                <el-menu-item index="/welcome/maintain"><i class="el-icon-user-solid">楼宇维修 </i></el-menu-item>
                <el-menu-item index="/welcome/card"><i class="el-icon-user-solid">工作证办理 </i></el-menu-item>
                <el-menu-item index="/welcome/supper"><i class="el-icon-user-solid">办公用品申领 </i></el-menu-item>
                <el-menu-item index="/welcome/log"><i class="el-icon-user-solid">日志 </i></el-menu-item>

                <!-- <el-menu-item index="/welcome/MailService"><i class="el-icon-user-solid">楼宇维修 </i></el-menu-item> -->
              </el-submenu>
            </el-menu-item-group>
            <el-submenu index="1-2">
              <template slot="title"><i>
                <svg style="    width: 28px;
    height: 24px;
    margin-bottom: 4px;
    margin-right: 6px;" t="1669979978270" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="4251" width="32" height="32">
                  <path
                    d="M893.842 217.557H130.159c-16.261 0-29.443 13.182-29.443 29.443v530c0 16.261 13.182 29.443 29.443 29.443h763.683c16.261 0 29.443-13.183 29.443-29.443V247c0-16.261-13.182-29.443-29.443-29.443z m-85.584 58.886L512 507.651 215.742 276.443h592.516zM159.602 747.557v-440.23l334.283 260.885A29.4 29.4 0 0 0 512 574.443a29.4 29.4 0 0 0 18.115-6.231l334.283-260.884v440.229H159.602z"
                    fill="#8a8a8a" p-id="4252"></path>
                </svg>
              </i>邮件服务
              </template>
              <el-menu-item index="/welcome/mailService"><i>
                <svg style="width: 19px;
    height: 16px;
    margin-bottom: 5px;
    border-right-width: 5px;
    margin-right: 8px;" t="1669980553183" class="icon" viewBox="0 0 1365 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="5597" width="16" height="16">
                  <path
                    d="M838.72628 639.836488c-77.296481 61.718267-124.863547 92.280107-172.965741 92.280107-46.021136 0-92.517942-28.659157-164.40367-84.669376l-428.103588 376.552781H1278.364882l-434.881895-387.849959-4.875624 3.686447zM331.245152 515.864824A36039.187086 36039.187086 0 0 1 0 257.932412v709.819533a53.512949 53.512949 0 0 0 1.308094 6.302636l431.373824-379.64464c-31.275345-24.734874-64.810127-50.242713-101.436766-78.604576z m1030.837765 468.416676a51.134595 51.134595 0 0 0 3.329695-16.470096V227.786784a96934.068517 96934.068517 0 0 0-453.908722 354.612473z"
                    p-id="5598" fill="#707070"></path>
                  <path
                    d="M1280.089188 0H85.323424A118.56091 118.56091 0 0 0 0 85.323424v67.247938c125.874347 100.188131 262.510742 205.60864 378.336546 294.975264 63.858785 49.291372 121.11764 93.588201 166.484729 128.847289 121.771687 95.490884 121.771687 95.490884 246.040646-3.864824 112.377192-89.842295 414.78481-325.120892 574.788526-449.568227v-37.518523A118.382534 118.382534 0 0 0 1280.089188 0z"
                    p-id="5599" fill="#707070"></path>
                </svg>
              </i>邮件列表
              </el-menu-item>
            </el-submenu>
            <!--            办公家居申请-->
            <el-submenu index="1-3">
              <template slot="title">
                <svg style="width: 25px;
    padding-right: 5px;" t="1671106596019" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="5551" width="32" height="32">
                  <path
                    d="M860.3 853h-698c-54.9 0-99.5-44.6-99.5-99.5v-312c0-54.9 44.6-99.5 99.5-99.5s99.5 44.6 99.5 99.5V654h499V441.5c0-54.9 44.6-99.5 99.5-99.5s99.5 44.6 99.5 99.5v312c0 54.8-44.6 99.5-99.5 99.5z m-698-471c-32.8 0-59.5 26.7-59.5 59.5v312c0 32.8 26.7 59.5 59.5 59.5h698c32.8 0 59.5-26.7 59.5-59.5v-312c0-32.8-26.7-59.5-59.5-59.5s-59.5 26.7-59.5 59.5V674c0 11-9 20-20 20h-539c-11 0-20-9-20-20V441.5c0-32.9-26.7-59.5-59.5-59.5z"
                    p-id="5552" fill="#8a8a8a"></path>
                  <path
                    d="M750.8 692h-479c-27.6 0-50-22.4-50-50v-9.5c0-75.3 61.2-136.5 136.5-136.5h306c75.3 0 136.5 61.2 136.5 136.5v9.5c0 27.5-22.4 50-50 50zM358.3 536c-53.2 0-96.5 43.3-96.5 96.5v9.5c0 5.5 4.5 10 10 10h479c5.5 0 10-4.5 10-10v-9.5c0-53.2-43.3-96.5-96.5-96.5h-306zM864.8 385.9c-11 0-20-9-20-20v-132c0-46.6-59.5-85.9-130-85.9h-407c-70.5 0-130 39.3-130 85.9v132c0 11-9 20-20 20s-20-9-20-20v-132c0-34.9 18.7-67.2 52.5-91.1 31.8-22.4 73.5-34.8 117.5-34.8h407c44 0 85.7 12.3 117.5 34.8 33.9 23.9 52.5 56.3 52.5 91.1v132c0 11-8.9 20-20 20zM250.1 927.1c-11 0-20-9-20-20v-68.4c0-11 9-20 20-20s20 9 20 20v68.4c0 11.1-8.9 20-20 20zM772.5 927.1c-11 0-20-9-20-20v-68.4c0-11 9-20 20-20s20 9 20 20v68.4c0 11.1-8.9 20-20 20z"
                    p-id="5553" fill="#8a8a8a"></path>
                </svg>
                办公家居申领
              </template>
              <el-menu-item index="/welcome/furniture"><i>
                <svg style="padding-right: 5px;
    width: 24px;" t="1671106850889" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="5851" width="32" height="32">
                  <path
                    d="M675.84 13.312q49.152 0 66.048 21.504t16.896 66.56l0 204.8q0 37.888-18.432 61.44t-69.632 23.552l-310.272 0q-49.152 0-68.608-22.528t-19.456-71.68l0-195.584q0-43.008 18.432-65.536t68.608-22.528l316.416 0zM714.752 446.464q24.576 0 34.304 12.288t9.728 32.768l0 82.944q0 21.504-11.264 35.328t-39.936 13.824l-384 0q-23.552 0-37.376-9.216t-13.824-38.912l0-84.992q0-44.032 49.152-44.032l393.216 0zM804.864 677.888l0-332.8q0-27.648 15.872-39.936t39.424-12.288l47.104 0q29.696 0 39.424 18.432t9.728 37.888l0 37.888 0 77.824 0 100.352 0 101.376 0 81.92 0 43.008q0 61.44-59.392 61.44l-35.84 0 0 90.112-65.536 0 0-90.112-559.104 0 0 90.112-64.512 0 0-90.112-40.96 0q-54.272 0-56.32-63.488l0-445.44q0-25.6 15.36-38.4t38.912-12.8l39.936 0q29.696 0 43.52 15.872t14.848 41.472l0 22.528q0 16.384-0.512 40.448t-0.512 52.736l0 58.368 0 153.6 578.56 0z"
                    p-id="5852" fill="#8a8a8a"></path>
                </svg>
              </i>申领列表
              </el-menu-item>
            </el-submenu>

            <el-header height="50px" style="overflow-y: hidden">
              <div>

              </div>
            </el-header>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>


<script>
  export default {
    data () {
      return {
        openeds: ['1', '1-1'],
        uniqueOpened: false,
        user: '',
      }
    },
    mounted () {
      this.getName()
    },
    methods: {
      getName () {
        var user = sessionStorage.getItem('user')
        //var obj = JSON.parse(obj)
        console.log('user:' + user)
        this.user = user
      },
      //退出方法
      async logout () {
        const url = '/vueboot/logout'
        const { data: res } = await this.$ajax.get(url, {
          headers: {
            token: localStorage.getItem('token'),
          },
        })
        window.sessionStorage.clear() // 清空sessionStorage
        window.localStorage.clear() // 清空localStorage
        this.$router.push('/login') // 返回登录页面
      },
    },
  }
</script>


<style>


  html, body, #app {
    height: 100%;
    margin: 0;
    padding: 0;
  }


  .el-container {
    height: 100%;
  }

  .el-header {
    background-color: #2a3f54;
  }


  .el-aside {
    display: block;
    position: relative;
    overflow-y: hidden;
    background-color: #2a3f54 !important;
    overflow-x: hidden;
  }


  .el-row {
    margin-bottom: 20px;
  }

  .el-col {
    border-radius: 4px;
  }


  .bg-purple {
    background: #2a3f54;
  }


  .welcome-content {
    border-radius: 4px;
    min-height: 36px;
    color: #717977;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    font-size: 14px;
  }


  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    color: white;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    font-size: 20px;
  }
</style>
